<template>
  <div class="contents">
    <PanelTitle title="基地概况" />

    <div class="mt">
      <img v-if="base" :src="base.imageUrl![0]" class="pics" alt="" />
      <div v-if="base" class="info">
       {{ base.remark }}
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import PanelTitle from "../../component/PanelTitle.vue";
import { useBaseStore } from "@/stores/base";
import http from "@/api/http";
import { env } from "@/utils/env";
import type { Base } from "@/types/Base";

const props = withDefaults(defineProps<{
  base:Base
}>(),{
  base: () => {return {imageUrl: []}}
})

</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
    padding: vh(10) vw(16);
  }
}

.pics {
  max-height: vh(106);
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

.info {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: vh(10);
  color: #2cd7bc;
  line-height: vh(15);
  text-indent: 2em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>